<template>
  <el-container v-loading="loading">
    <div class="container" style="height: 100vh;">
      <div id="app">
        <!-- 手机模拟器 -->
        <div class="app-preview">
          <div class="app-head"></div>
          <div class="app-content">
            <div class="app-content-title"
                 v-bind:style="{background:pageConfig.titleConfig.navigationBgColor,color:pageConfig.titleConfig.fontColor}"
                 v-bind:class="{ 'active': appEditorConfig.currentEditor == 'head'}"
                 @click="chooseAppView({viewName: 'head'})">
              {{pageConfig.titleConfig.pageTitle}}
            </div>

            <div class="app-content-main" v-bind:class="{ 'active': appEditorConfig.currentEditor == 'main'}"
                 @click="chooseAppView({viewName: 'main'})">
              <!--templet1-->
              <div class="templet1" v-if="templetType == 1">
                <div class="column">
                  <div class="ware-input">
                                <textarea class="textarea"
                                          v-bind:placeholder="pageConfig.mainConfig.templet1.commodityConfig.hintText"></textarea>
                    <div class="util-icon">
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet1.commodityConfig.tackPictureIcon"
                             alt="">
                      </div>
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet1.commodityConfig.soundRecording"
                             alt="">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet1.buyAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet1.buyAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet1.buyAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <button class="btn btn-success radius addres-side-btn"
                              v-bind:style="{'background':pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnBgColor,'borderColor':pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnBgColor,'color':pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnFontColor}">
                        {{pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnText}}
                      </button>
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet1.timeConfig.enabled == '1'">
                  <div class="col">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet1.timeConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet1.timeConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet1.bargainingConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet1.bargainingConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet1.bargainingConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet1.discountConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet1.discountConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet1.discountConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>

                  <div class="col"
                       v-if="pageConfig.mainConfig.templet1.integralDeductionConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet1.integralDeductionConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet1.integralDeductionConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet1.gratuityConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet1.gratuityConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet1.gratuityConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="scaler-icon" src="<?php echo config('path_run') ?>/home/images/scaler-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet1.couponConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet1.couponConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet1.couponConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <span class="hint-text">优惠0元</span>
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet1.leaveWordConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet1.leaveWordConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text" style="display: flex;">
                      <span style="width: 50px;display:inline-block;overflow: hidden;margin: 0;padding: 0;">{{pageConfig.mainConfig.templet1.leaveWordConfig.textHint}}</span>
                      <input type="text" class="input-text radius size-S col-input"
                             style="height:100%;line-height: 100%;"
                             v-bind:placeholder="pageConfig.mainConfig.templet1.leaveWordConfig.inputHint">
                    </div>
                  </div>
                </div>

                <div class="protocol-linked">
                  <img src="<?php echo config('path_run') ?>/home/images/check-icon.png" class="icon" alt="">
                  我已阅读并同意 <span class="protocol-text"
                                v-bind:style="{'color':pageConfig.mainConfig.templet1.protocolConfig.fontColor}">{{pageConfig.mainConfig.templet1.protocolConfig.title}}</span>
                </div>
              </div>

              <!--templet2-->
              <div class="templet2" v-if="templetType == 2">
                <div class="column">
                  <div class="ware-input">
                                <textarea class="textarea"
                                          v-bind:placeholder="pageConfig.mainConfig.templet2.commodityConfig.hintText"></textarea>
                    <div class="util-icon">
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet2.commodityConfig.tackPictureIcon"
                             alt="">
                      </div>
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet2.commodityConfig.soundRecording"
                             alt="">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet2.largessAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet2.largessAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet2.largessAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <button class="btn btn-success radius addres-side-btn"
                              v-bind:style="{'background':pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnBgColor,'borderColor':pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnBgColor,'color':pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnFontColor}">
                        {{pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnText}}
                      </button>
                    </div>
                  </div>

                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet2.multiImageUploadConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet2.multiImageUploadConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet2.multiImageUploadConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <button style="margin:0;font-size:12px;" class="btn btn-success radius addres-side-btn"
                              v-bind:style="{'background':pageConfig.mainConfig.templet2.multiImageUploadConfig.btnBgColor,'borderColor':pageConfig.mainConfig.templet2.multiImageUploadConfig.btnBgColor,'color':pageConfig.mainConfig.templet2.multiImageUploadConfig.btnFontColor}">
                        {{pageConfig.mainConfig.templet2.multiImageUploadConfig.btnText}}
                      </button>
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet2.timeConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet2.timeConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet2.timeConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet2.bargainingConfig.enabled == '1'">
                  <div class="col">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet2.bargainingConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet2.bargainingConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet2.discountConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet2.discountConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet2.discountConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>

                  <div class="col"
                       v-if="pageConfig.mainConfig.templet2.integralDeductionConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet2.integralDeductionConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet2.integralDeductionConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet2.weightConfig.enabled == '1'">
                  <div class="col-weight">
                    <img class="icon" src="<?php echo config('path_run') ?>/home/images/slider-img.png" alt="">
                    <p>{{pageConfig.mainConfig.templet2.weightConfig.textHint}}<span
                      class="col-weight-color">0 kg</span></p>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet2.gratuityConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet2.gratuityConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet2.gratuityConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="scaler-icon" src="<?php echo config('path_run') ?>/home/images/scaler-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet2.couponConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet2.couponConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet2.couponConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <span class="hint-text">优惠0元</span>
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet2.leaveWordConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet2.leaveWordConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text" style="display: flex;">
                      <span style="width: 50px;display:inline-block;overflow: hidden;margin: 0;padding: 0;">{{pageConfig.mainConfig.templet2.leaveWordConfig.textHint}}</span>
                      <input type="text" class="input-text radius size-S col-input"
                             style="height:100%;line-height: 100%;"
                             v-bind:placeholder="pageConfig.mainConfig.templet2.leaveWordConfig.inputHint">
                    </div>
                  </div>
                </div>

                <div class="protocol-linked">
                  <img src="__STATIC__/home/images/check-icon.png" class="icon" alt="">
                  我已阅读并同意 <span class="protocol-text"
                                v-bind:style="{'color':pageConfig.mainConfig.templet2.protocolConfig.fontColor}">{{pageConfig.mainConfig.templet2.protocolConfig.title}}</span>
                </div>
              </div>

              <!--templet3-->
              <div class="templet3" v-if="templetType == 3">
                <div class="column">
                  <div class="service-col service-col-title"
                       v-bind:style="{'color':pageConfig.mainConfig.templet3.serviceConfig.titleFontColor}">
                    {{pageConfig.mainConfig.templet3.serviceConfig.title}}
                  </div>
                  <div class="service-col service-group">
                    <button class="btn btn-danger radius"
                            v-bind:style="{'background':pageConfig.mainConfig.templet3.serviceConfig.serviceBtnBgColor,'borderColor':pageConfig.mainConfig.templet3.serviceConfig.serviceBtnBgColor,'color':pageConfig.mainConfig.templet3.serviceConfig.serviceBtnFontColor}"
                            v-for="serviceItem in pageConfig.mainConfig.templet3.serviceConfig.serviceGroups ">
                      {{serviceItem.name}}
                    </button>
                  </div>
                </div>

                <div class="column">
                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet3.buyAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet3.buyAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet3.buyAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <!--<div class="address-group">-->
                  <!--<div class="addres-icon">-->
                  <!--<img class="icon"-->
                  <!--v-bind:src="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.icon"-->
                  <!--alt="">-->
                  <!--</div>-->
                  <!--<div class="address-input-group">-->
                  <!--<input type="text" class="input-text radius size-S address-input-item"-->
                  <!--v-bind:placeholder="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.hintLocationText">-->
                  <!--<input type="text" class="input-text radius size-S address-input-item"-->
                  <!--v-bind:placeholder="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.hintAddressText">-->
                  <!--</div>-->
                  <!--<div class="addres-side">-->
                  <!--<button class="btn btn-success radius addres-side-btn"-->
                  <!--v-bind:style="{'background':pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnBgColor,'borderColor':pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnBgColor,'color':pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnFontColor}">-->
                  <!--{{pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnText}}-->
                  <!--</button>-->
                  <!--</div>-->
                  <!--</div>-->
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet3.timeConfig.enabled == '1'">
                  <div class="col">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet3.timeConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet3.timeConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet3.bargainingConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet3.bargainingConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet3.bargainingConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet3.discountConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet3.discountConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet3.discountConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>

                  <div class="col"
                       v-if="pageConfig.mainConfig.templet3.integralDeductionConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet3.integralDeductionConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet3.integralDeductionConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet3.gratuityConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet3.gratuityConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet3.gratuityConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="scaler-icon" src="__STATIC__/home/images/scaler-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet3.couponConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet3.couponConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet3.couponConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <span class="hint-text">优惠0元</span>
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet3.leaveWordConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet3.leaveWordConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text" style="display: flex;">
                      <span style="width: 50px;display:inline-block;overflow: hidden;margin: 0;padding: 0;">{{pageConfig.mainConfig.templet3.leaveWordConfig.textHint}}</span>
                      <input type="text" class="input-text radius size-S col-input"
                             style="height:100%;line-height: 100%;"
                             v-bind:placeholder="pageConfig.mainConfig.templet3.leaveWordConfig.inputHint">
                    </div>
                  </div>
                </div>

                <div class="protocol-linked">
                  <img src="__STATIC__/home/images/check-icon.png" class="icon" alt="">
                  我已阅读并同意 <span class="protocol-text"
                                v-bind:style="{'color':pageConfig.mainConfig.templet3.protocolConfig.fontColor}">{{pageConfig.mainConfig.templet3.protocolConfig.title}}</span>
                </div>
              </div>

              <!-- templet4 -->
              <div class="templet4" v-if="templetType == 4">
                <div class="column">
                  <div class="ware-input">
                                <textarea class="textarea"
                                          v-bind:placeholder="pageConfig.mainConfig.templet4.commodityConfig.hintText"></textarea>
                    <div class="util-icon">
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet4.commodityConfig.tackPictureIcon"
                             alt="">
                      </div>
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet4.commodityConfig.soundRecording"
                             alt="">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet4.transactAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet4.transactAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet4.transactAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <!--<div class="address-group">
                                <div class="addres-icon">
                                    <img class="icon"
                                         v-bind:src="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.icon"
                                         alt="">
                                </div>
                                <div class="address-input-group">
                                    <input type="text" class="input-text radius size-S address-input-item"
                                           v-bind:placeholder="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.hintLocationText">
                                    <input type="text" class="input-text radius size-S address-input-item"
                                           v-bind:placeholder="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.hintAddressText">
                                </div>
                                <div class="addres-side">
                                    <button class="btn btn-success radius addres-side-btn"
                                            v-bind:style="{'background':pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnBgColor,'borderColor':pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnBgColor,'color':pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnFontColor}">
                                        {{pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnText}}
                                    </button>
                                </div>
                            </div>-->
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet4.timeConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet4.timeConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet4.timeConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet4.bargainingConfig.enabled == '1'">
                  <div class="col">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet4.bargainingConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet4.bargainingConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet4.discountConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet4.discountConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet4.discountConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>

                  <div class="col"
                       v-if="pageConfig.mainConfig.templet4.integralDeductionConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet4.integralDeductionConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet4.integralDeductionConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet4.priceConfig.enabled == '1'">
                  <div class="col-weight">
                    <img class="icon" src="__STATIC__/home/images/slider-img.png" alt="">
                    <p>{{pageConfig.mainConfig.templet4.priceConfig.textHint}}<span
                      class="col-weight-color">0 元</span></p>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet4.gratuityConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet4.gratuityConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet4.gratuityConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="scaler-icon" src="__STATIC__/home/images/scaler-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet4.couponConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet4.couponConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet4.couponConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <span class="hint-text">优惠0元</span>
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet4.leaveWordConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet4.leaveWordConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text" style="display: flex;">
                      <span style="width: 50px;display:inline-block;overflow: hidden;margin: 0;padding: 0;">{{pageConfig.mainConfig.templet4.leaveWordConfig.textHint}}</span>
                      <input type="text" class="input-text radius size-S col-input"
                             style="height:100%;line-height: 100%;"
                             v-bind:placeholder="pageConfig.mainConfig.templet4.leaveWordConfig.inputHint">
                    </div>
                  </div>
                </div>

                <div class="protocol-linked">
                  <img src="__STATIC__/home/images/check-icon.png" class="icon" alt="">
                  我已阅读并同意 <span class="protocol-text"
                                v-bind:style="{'color':pageConfig.mainConfig.templet4.protocolConfig.fontColor}">{{pageConfig.mainConfig.templet4.protocolConfig.title}}</span>
                </div>
              </div>

              <!-- templet5 -->
              <div class="templet5" v-if="templetType == 5">
                <div class="column">
                  <div class="ware-input">
                                <textarea class="textarea"
                                          v-bind:placeholder="pageConfig.mainConfig.templet5.commodityConfig.hintText"></textarea>
                    <div class="util-icon">
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet5.commodityConfig.tackPictureIcon"
                             alt="">
                      </div>
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet5.commodityConfig.soundRecording"
                             alt="">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <button class="btn btn-success radius addres-side-btn"
                              v-bind:style="{'background':pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnBgColor,'borderColor':pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnBgColor,'color':pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnFontColor}">
                        {{pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnText}}
                      </button>
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet5.timeConfig.enabled == '1'">
                  <div class="col">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet5.timeConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet5.timeConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet5.bargainingConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet5.bargainingConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet5.bargainingConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet5.discountConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet5.discountConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet5.discountConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>

                  <div class="col"
                       v-if="pageConfig.mainConfig.templet5.integralDeductionConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet5.integralDeductionConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet5.integralDeductionConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet5.priceConfig.enabled == '1'">
                  <div class="col-weight">
                    <img class="icon" src="__STATIC__/home/images/slider-img.png" alt="">
                    <p>{{pageConfig.mainConfig.templet5.priceConfig.textHint}}<span
                      class="col-weight-color">0 元</span></p>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet5.gratuityConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet5.gratuityConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet5.gratuityConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="scaler-icon" src="__STATIC__/home/images/scaler-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet5.couponConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet5.couponConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet5.couponConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <span class="hint-text">优惠0元</span>
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet5.leaveWordConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet5.leaveWordConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text" style="display: flex;">
                      <span style="width: 50px;display:inline-block;overflow: hidden;margin: 0;padding: 0;">{{pageConfig.mainConfig.templet5.leaveWordConfig.textHint}}</span>
                      <input type="text" class="input-text radius size-S col-input"
                             style="height:100%;line-height: 100%;"
                             v-bind:placeholder="pageConfig.mainConfig.templet5.leaveWordConfig.inputHint">
                    </div>
                  </div>
                </div>

                <div class="protocol-linked">
                  <img src="__STATIC__/home/images/check-icon.png" class="icon" alt="">
                  我已阅读并同意 <span class="protocol-text"
                                v-bind:style="{'color':pageConfig.mainConfig.templet5.protocolConfig.fontColor}">{{pageConfig.mainConfig.templet5.protocolConfig.title}}</span>
                </div>
              </div>

              <!--templet6-->
              <div class="templet6" v-if="templetType == 6">
                <div class="column">
                  <div class="ware-input">
                                <textarea class="textarea"
                                          v-bind:placeholder="pageConfig.mainConfig.templet6.commodityConfig.hintText"></textarea>
                    <div class="util-icon">
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet6.commodityConfig.tackPictureIcon"
                             alt="">
                      </div>
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet6.commodityConfig.soundRecording"
                             alt="">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet6.mineAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet6.mineAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet6.mineAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet6.targetAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet6.targetAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet6.targetAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet6.timeConfig.enabled == '1'">
                  <div class="col">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet6.timeConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet6.timeConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet6.bargainingConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet6.bargainingConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet6.bargainingConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet6.discountConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet6.discountConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet6.discountConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>

                  <div class="col"
                       v-if="pageConfig.mainConfig.templet6.integralDeductionConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet6.integralDeductionConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet6.integralDeductionConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="switch-icon" src="__STATIC__/home/images/switch-img.png" alt="">
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet6.gratuityConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet6.gratuityConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet6.gratuityConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="scaler-icon" src="__STATIC__/home/images/scaler-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet6.couponConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet6.couponConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet6.couponConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <span class="hint-text">优惠0元</span>
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet6.leaveWordConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet6.leaveWordConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text" style="display: flex;">
                      <span style="width: 50px;display:inline-block;overflow: hidden;margin: 0;padding: 0;">{{pageConfig.mainConfig.templet6.leaveWordConfig.textHint}}</span>
                      <input type="text" class="input-text radius size-S col-input"
                             style="height:100%;line-height: 100%;"
                             v-bind:placeholder="pageConfig.mainConfig.templet6.leaveWordConfig.inputHint">
                    </div>
                  </div>
                </div>

                <div class="protocol-linked">
                  <img src="__STATIC__/home/images/check-icon.png" class="icon" alt="">
                  我已阅读并同意 <span class="protocol-text"
                                v-bind:style="{'color':pageConfig.mainConfig.templet6.protocolConfig.fontColor}">{{pageConfig.mainConfig.templet6.protocolConfig.title}}</span>
                </div>
              </div>

              <!--templet7-->
              <div class="templet2" v-if="templetType == 7">
                <div class="column">
                  <div class="ware-input">
                                <textarea class="textarea"
                                          v-bind:placeholder="pageConfig.mainConfig.templet7.commodityConfig.hintText"></textarea>
                    <div class="util-icon">
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet7.commodityConfig.tackPictureIcon"
                             alt="">
                      </div>
                      <div class="icon-item">
                        <img v-bind:src="pageConfig.mainConfig.templet7.commodityConfig.soundRecording"
                             alt="">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet7.largessAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet7.largessAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet7.largessAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="address-group">
                    <div class="addres-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.icon"
                           alt="">
                    </div>
                    <div class="address-input-group">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.hintLocationText">
                      <input type="text" class="input-text radius size-S address-input-item"
                             v-bind:placeholder="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.hintAddressText">
                    </div>
                    <div class="addres-side">
                      <button class="btn btn-success radius addres-side-btn"
                              v-bind:style="{'background':pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnBgColor,'borderColor':pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnBgColor,'color':pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnFontColor}">
                        {{pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnText}}
                      </button>
                    </div>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet7.timeConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet7.timeConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet7.timeConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet7.bargainingConfig.enabled == '1'">
                  <div class="col">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet7.bargainingConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet7.bargainingConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet7.discountConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet7.discountConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet7.discountConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>

                  <div class="col"
                       v-if="pageConfig.mainConfig.templet7.integralDeductionConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon"
                           v-bind:src="pageConfig.mainConfig.templet7.integralDeductionConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet7.integralDeductionConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <!--<img class="switch-icon" src="<?php echo config('path_run') ?>/home/images/switch-img.png" alt="">-->
                    </div>
                  </div>
                </div>

                <div class="column" v-if="pageConfig.mainConfig.templet7.weightConfig.enabled == '1'">
                  <div class="col-weight">
                    <img class="icon" src="<?php echo config('path_run') ?>/home/images/slider-img.png" alt="">
                    <p>{{pageConfig.mainConfig.templet7.weightConfig.textHint}}<span
                      class="col-weight-color">0 kg</span></p>
                  </div>
                </div>

                <div class="column">
                  <div class="col" v-if="pageConfig.mainConfig.templet7.gratuityConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet7.gratuityConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet7.gratuityConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <img class="scaler-icon" src="<?php echo config('path_run') ?>/home/images/scaler-img.png" alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet7.couponConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet7.couponConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text">
                      <p>{{pageConfig.mainConfig.templet7.couponConfig.textHint}}</p>
                    </div>
                    <div class="col-side">
                      <span class="hint-text">优惠0元</span>
                      <img class="icon"
                           src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon11.png"
                           alt="">
                    </div>
                  </div>

                  <div class="col" v-if="pageConfig.mainConfig.templet7.leaveWordConfig.enabled == '1'">
                    <div class="col-icon">
                      <img class="icon" v-bind:src="pageConfig.mainConfig.templet7.leaveWordConfig.icon"
                           alt="">
                    </div>
                    <div class="col-text" style="display: flex;">
                      <span style="width: 50px;display:inline-block;overflow: hidden;margin: 0;padding: 0;">{{pageConfig.mainConfig.templet7.leaveWordConfig.textHint}}</span>
                      <input type="text" class="input-text radius size-S col-input"
                             style="height:100%;line-height: 100%;"
                             v-bind:placeholder="pageConfig.mainConfig.templet7.leaveWordConfig.inputHint">
                    </div>
                  </div>
                </div>

                <div class="protocol-linked">
                  <img src="__STATIC__/home/images/check-icon.png" class="icon" alt="">
                  我已阅读并同意 <span class="protocol-text"
                                v-bind:style="{'color':pageConfig.mainConfig.templet7.protocolConfig.fontColor}">{{pageConfig.mainConfig.templet7.protocolConfig.title}}</span>
                </div>
              </div>
            </div>

          </div>
          <div class="app-footer"></div>
        </div>

        <!-- 编辑器 -->
        <div class="app-editor" v-bind:style="appEditorConfig.fixedPosition">
          <!-- APP HEAD -->
          <div v-if="appEditorConfig.currentEditor == 'head'">
            <div class="input-group">
              <div class="input-addo">
                页面名称
              </div>
              <div class="input-control">
                <input type="text" class="text-input" placeholder="页面名称"
                       v-model="pageConfig.titleConfig.pageTitle">
              </div>
            </div>
            <div class="input-group">
              <div class="input-addo">
                导航背景色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.titleConfig.navigationBgColor">
                <button type="button" class="color-reset-btn" @click="navigationBgColorReset()">重置</button>
              </div>
            </div>

            <div class="input-group">
              <div class="input-addo">
                导航栏字体颜色
              </div>
              <div class="input-control">
                <el-radio v-model="pageConfig.titleConfig.fontColor" label="#FFFFFF" border size="mini">白</el-radio>
                <el-radio v-model="pageConfig.titleConfig.fontColor" label="#000000" border size="mini">黑</el-radio>
              </div>
            </div>
          </div>

          <!-- APP MAIN -->
          <div v-if="appEditorConfig.currentEditor == 'main'">

            <!-- 模板样式 -->
            <div class="input-group">
              <div class="input-addo">
                模板样式
              </div>
              <div class="input-control">
                <div>
                  <el-radio v-model="templetType" label="1" border size="mini">购买</el-radio>
                  <el-radio v-model="templetType" label="2" border size="mini">代送</el-radio>
                  <el-radio v-model="templetType" label="3" border size="mini">代排队</el-radio>
                  <el-radio v-model="templetType" label="4" border size="mini">代办</el-radio>
                </div>
              </div>
            </div>
            <div class="input-group">
              <div class="input-addo"></div>
              <div class="input-control">
                <div>
                  <el-radio v-model="templetType" label="5" border size="mini">家政</el-radio>
                  <el-radio v-model="templetType" label="6" border size="mini">代驾</el-radio>
                  <el-radio v-model="templetType" label="7" border size="mini">代取</el-radio>
                </div>
              </div>
            </div>

            <!-- 分割 -->
            <div class="dashed-break-up"></div>


            <!-- 模板一 -->
            <div v-if="templetType == 1">
              <!-- 下单  -->
              <div class="input-group">
                <div class="input-addo">
                  下单输入框提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet1.commodityConfig.hintText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  拍照下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet1.commodityConfig.tackPictureIcon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.commodityConfig.tackPictureIcon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.commodityConfig.tackPictureIcon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  语音下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet1.commodityConfig.soundRecording">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.commodityConfig.soundRecording">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.commodityConfig.soundRecording'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 帮我买  -->
              <div class="input-group">
                <div class="input-addo">
                  购买位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet1.buyAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  购买地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet1.buyAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  购买地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet1.buyAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.buyAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.buyAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 收货地址  -->
              <div class="input-group">
                <div class="input-addo">
                  收货位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  收货地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货按钮背景颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnBgColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnBgColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  收货按钮文字颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnFontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnFontColor', color: '#FFFFFF'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货按钮文字
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.takeDeliveryAddressConfig.btnText">
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 配送时间 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  配送时间图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet1.timeConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.timeConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.timeConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.timeConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet1.timeConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 议价 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  议价图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet1.bargainingConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.bargainingConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.bargainingConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.bargainingConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet1.bargainingConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 会员折扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  会员折扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet1.discountConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.discountConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.discountConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.discountConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet1.discountConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 积分抵扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  积分抵扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet1.integralDeductionConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.integralDeductionConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.integralDeductionConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.integralDeductionConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet1.integralDeductionConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 小费 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  小费图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet1.gratuityConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.gratuityConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.gratuityConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.gratuityConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet1.gratuityConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 红包 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  红包图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet1.couponConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.couponConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.couponConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.couponConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet1.couponConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 留言 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  留言图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet1.leaveWordConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet1.leaveWordConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet1.leaveWordConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.leaveWordConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言输入提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet1.leaveWordConfig.inputHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet1.leaveWordConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 协议设置 -->
              <div class="input-group">
                <div class="input-addo">
                  协议名称
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入协议名称"
                         v-model="pageConfig.mainConfig.templet1.protocolConfig.title">
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  协议名称颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet1.protocolConfig.fontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet1.protocolConfig.fontColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <!--<div class="input-group">
                <div class="input-addo">
                  协议跳转链接
                </div>
                <div class="input-control">
                  <select class="text-input"
                          v-model="pageConfig.mainConfig.templet1.protocolConfig.linkedUrl">
                    <option value="">请选择</option>
                    <option v-bind:value="linkedItem.id" v-for="linkedItem in linkedArr">
                      {{linkedItem.title}}
                    </option>
                  </select>
                </div>
              </div>-->
              <!-- 分割 -->
              <div class="dashed-break-up"></div>

            </div>

            <!-- 模板二 -->
            <div v-if="templetType == 2">
              <!-- 下单  -->
              <div class="input-group">
                <div class="input-addo">
                  下单输入框提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet2.commodityConfig.hintText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  拍照下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet2.commodityConfig.tackPictureIcon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.commodityConfig.tackPictureIcon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.commodityConfig.tackPictureIcon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  语音下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet2.commodityConfig.soundRecording">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.commodityConfig.soundRecording">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.commodityConfig.soundRecording'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 帮我送 -->
              <div class="input-group">
                <div class="input-addo">
                  购买位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet2.largessAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  购买地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet2.largessAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  购买地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet2.largessAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.largessAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.largessAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 收货地址  -->
              <div class="input-group">
                <div class="input-addo">
                  收货位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  收货地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货按钮背景颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnBgColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnBgColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  收货按钮文字颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnFontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnFontColor', color: '#FFFFFF'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货按钮文字
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.takeDeliveryAddressConfig.btnText">
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 多图上传  -->
              <div class="input-group">
                <div class="input-addo">
                  上传提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet2.multiImageUploadConfig.textHint">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  上传图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet2.multiImageUploadConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.multiImageUploadConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.multiImageUploadConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  上传按钮背景颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet2.multiImageUploadConfig.btnBgColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet2.multiImageUploadConfig.btnBgColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  上传按钮文字颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet2.multiImageUploadConfig.btnFontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet2.multiImageUploadConfig.btnFontColor', color: '#FFFFFF'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  上传按钮文字
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.multiImageUploadConfig.btnText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  上传是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.multiImageUploadConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 配送时间 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  配送时间图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet2.timeConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.timeConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.timeConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.timeConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.timeConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 议价 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  议价图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet2.bargainingConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.bargainingConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.bargainingConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.bargainingConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.bargainingConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 会员折扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  会员折扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet2.discountConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.discountConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.discountConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.discountConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.discountConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 积分抵扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  积分抵扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet2.integralDeductionConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.integralDeductionConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.integralDeductionConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.integralDeductionConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.integralDeductionConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 物品重量 -->
              <div class="input-group">
                <div class="input-addo">
                  物品重量文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.weightConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  物品重量是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.weightConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 小费 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  小费图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet2.gratuityConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.gratuityConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.gratuityConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.gratuityConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.gratuityConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 红包 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  红包图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet2.couponConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.couponConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.couponConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.couponConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.couponConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 留言 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  留言图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet2.leaveWordConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet2.leaveWordConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet2.leaveWordConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.leaveWordConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言输入提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet2.leaveWordConfig.inputHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet2.leaveWordConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 协议设置 -->
              <div class="input-group">
                <div class="input-addo">
                  协议名称
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入协议名称"
                         v-model="pageConfig.mainConfig.templet2.protocolConfig.title">
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  协议名称颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet2.protocolConfig.fontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet2.protocolConfig.fontColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <!--<div class="input-group">
                <div class="input-addo">
                  协议跳转链接
                </div>
                <div class="input-control">
                  <select class="text-input"
                          v-model="pageConfig.mainConfig.templet2.protocolConfig.linkedUrl">
                    <option value="">请选择</option>
                    <option v-bind:value="linkedItem.id" v-for="linkedItem in linkedArr">
                      {{linkedItem.title}}
                    </option>
                  </select>
                </div>
              </div>-->
              <!-- 分割 -->
              <div class="dashed-break-up"></div>

            </div>

            <!-- 模板三 -->
            <div v-if="templetType == 3">
              <!--  添加服务类型 -->
              <div class="input-group">
                <div class="input-addo">
                  服务标题文字
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入服务标题文字"
                         v-model="pageConfig.mainConfig.templet3.serviceConfig.title">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  服务标题文字颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet3.serviceConfig.titleFontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet3.serviceConfig.titleFontColor', color: '#333333'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  服务按钮背景颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet3.serviceConfig.serviceBtnBgColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet3.serviceConfig.serviceBtnBgColor', color: '#DC3545'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  服务按钮文字颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet3.serviceConfig.serviceBtnFontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet3.serviceConfig.serviceBtnFontColor', color: '#FFFFFF'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="list-group"
                   v-for="(serviceItem, index) in pageConfig.mainConfig.templet3.serviceConfig.serviceGroups">
                <div class="list-group-item list-group-item-action">
                  <div class="ingress-input-group">
                    <div class="input-addo">
                      服务名称
                    </div>
                    <div class="input-control">
                      <input type="text" class="text-input" placeholder="输入服务名称"
                             v-model="serviceItem.name">
                    </div>
                  </div>

                  <!-- 收货地址开关 -->
                  <div class="ingress-input-group">
                    <div class="input-addo">
                      收货地址
                    </div>
                    <div class="input-control">
                      <el-switch
                        v-model="serviceItem.takeDeliveryAddresEnabled"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-value="0"
                        active-value="1"
                        size="mini">
                      </el-switch>
                    </div>
                  </div>
                </div>
                <span class="fa-li fa fa-remove remove-icon" title="删除服务"
                      @click="removeServiceItem({index: index})"></span>
              </div>

              <button type="button" class="btn btn-outline-secondary append-btn" @click="appendServiceItem()">
                添加服务
              </button>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 帮我买  -->
              <div class="input-group">
                <div class="input-addo">
                  购买位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet3.buyAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  购买地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet3.buyAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  购买地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet3.buyAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.buyAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.buyAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 收货地址  -->
              <div class="input-group">
                <div class="input-addo">
                  收货位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  收货地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货按钮背景颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnBgColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnBgColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  收货按钮文字颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnFontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnFontColor', color: '#FFFFFF'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货按钮文字
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.takeDeliveryAddressConfig.btnText">
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 配送时间 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  配送时间图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet3.timeConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.timeConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.timeConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.timeConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet3.timeConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 议价 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  议价图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet3.bargainingConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.bargainingConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.bargainingConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.bargainingConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet3.bargainingConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 会员折扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  会员折扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet3.discountConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.discountConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.discountConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.discountConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet3.discountConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 积分抵扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  积分抵扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet3.integralDeductionConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.integralDeductionConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.integralDeductionConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.integralDeductionConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet3.integralDeductionConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 小费 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  小费图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet3.gratuityConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.gratuityConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.gratuityConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.gratuityConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet3.gratuityConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 红包 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  红包图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet3.couponConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.couponConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.couponConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.couponConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet3.couponConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 留言 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  留言图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet3.leaveWordConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet3.leaveWordConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet3.leaveWordConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.leaveWordConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言输入提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet3.leaveWordConfig.inputHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet3.leaveWordConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 协议设置 -->
              <div class="input-group">
                <div class="input-addo">
                  协议名称
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入协议名称"
                         v-model="pageConfig.mainConfig.templet3.protocolConfig.title">
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  协议名称颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet3.protocolConfig.fontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet3.protocolConfig.fontColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <!--<div class="input-group">
                <div class="input-addo">
                  协议跳转链接
                </div>
                <div class="input-control">
                  <select class="text-input"
                          v-model="pageConfig.mainConfig.templet3.protocolConfig.linkedUrl">
                    <option value="">请选择</option>
                    <option v-bind:value="linkedItem.id" v-for="linkedItem in linkedArr">
                      {{linkedItem.title}}
                    </option>
                  </select>
                </div>
              </div>-->
              <!-- 分割 -->
              <div class="dashed-break-up"></div>
            </div>

            <!-- 模板四 -->
            <div v-if="templetType == 4">
              <!-- 下单  -->
              <div class="input-group">
                <div class="input-addo">
                  下单输入框提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet4.commodityConfig.hintText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  拍照下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet4.commodityConfig.tackPictureIcon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.commodityConfig.tackPictureIcon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.commodityConfig.tackPictureIcon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  语音下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet4.commodityConfig.soundRecording">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.commodityConfig.soundRecording">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.commodityConfig.soundRecording'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 帮我办  -->
              <div class="input-group">
                <div class="input-addo">
                  办理位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet4.transactAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  办理地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet4.transactAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  办理地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet4.transactAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.transactAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.transactAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 收货地址  -->
              <!--<div class="input-group">
                        <div class="input-addo">
                            收货位置提示
                        </div>
                        <div class="input-control">
                            <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                                   v-model="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.hintLocationText">
                        </div>
                    </div>

                    <div class="input-group">
                        <div class="input-addo">
                            收货地址提示
                        </div>
                        <div class="input-control">
                            <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                                   v-model="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.hintAddressText">
                        </div>
                    </div>

                    <div class="notify-editor-group">
                        <div class="input-addo">
                            收货地址图标
                        </div>
                        <div class="banner-img">
                            <img class="banner-img"
                                 v-bind:src="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.icon">
                        </div>
                        <div class="input-control">
                            <div class="input-item">
                                <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                                       v-model="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.icon">
                                <button type="button" class="input-choose-btn" data-toggle="modal"
                                        data-target="#exampleModalCenter"
                                        @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.icon'})">
                                    请选择
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="input-group">
                        <div class="input-addo">
                            收货按钮背景颜色
                        </div>
                        <div class="input-control">
                            <input type="color" class="color-input"
                                   v-model="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnBgColor">
                            <button type="button" class="color-reset-btn"
                                    @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnBgColor', color: '#28A745'})">
                                重置
                            </button>
                        </div>
                    </div>
                    <div class="input-group">
                        <div class="input-addo">
                            收货按钮文字颜色
                        </div>
                        <div class="input-control">
                            <input type="color" class="color-input"
                                   v-model="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnFontColor">
                            <button type="button" class="color-reset-btn"
                                    @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnFontColor', color: '#FFFFFF'})">
                                重置
                            </button>
                        </div>
                    </div>

                    <div class="input-group">
                        <div class="input-addo">
                            收货按钮文字
                        </div>
                        <div class="input-control">
                            <input type="text" class="text-input" placeholder="输入显示文字"
                                   v-model="pageConfig.mainConfig.templet4.takeDeliveryAddressConfig.btnText">
                        </div>
                    </div>-->

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 配送时间 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  配送时间图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet4.timeConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.timeConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.timeConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.timeConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet4.timeConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 议价 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  议价图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet4.bargainingConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.bargainingConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.bargainingConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.bargainingConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet4.bargainingConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 会员折扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  会员折扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet4.discountConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.discountConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.discountConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.discountConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet4.discountConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 积分抵扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  积分抵扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet4.integralDeductionConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.integralDeductionConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.integralDeductionConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.integralDeductionConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet4.integralDeductionConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 价格 -->
              <div class="input-group">
                <div class="input-addo">
                  办理费用文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.priceConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  办理费用是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet4.priceConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 小费 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  小费图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet4.gratuityConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.gratuityConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.gratuityConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.gratuityConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet4.gratuityConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 红包 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  红包图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet4.couponConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.couponConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.couponConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.couponConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet4.couponConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 留言 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  留言图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet4.leaveWordConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet4.leaveWordConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet4.leaveWordConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.leaveWordConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言输入提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet4.leaveWordConfig.inputHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet4.leaveWordConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 协议设置 -->
              <div class="input-group">
                <div class="input-addo">
                  协议名称
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入协议名称"
                         v-model="pageConfig.mainConfig.templet4.protocolConfig.title">
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  协议名称颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet4.protocolConfig.fontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet4.protocolConfig.fontColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <!--<div class="input-group">
                <div class="input-addo">
                  协议跳转链接
                </div>
                <div class="input-control">
                  <select class="text-input"
                          v-model="pageConfig.mainConfig.templet4.protocolConfig.linkedUrl">
                    <option value="">请选择</option>
                    <option v-bind:value="linkedItem.id" v-for="linkedItem in linkedArr">
                      {{linkedItem.title}}
                    </option>
                  </select>
                </div>
              </div>-->
              <!-- 分割 -->
              <div class="dashed-break-up"></div>

            </div>

            <!-- 模板五 -->
            <div v-if="templetType == 5">
              <!-- 下单  -->
              <div class="input-group">
                <div class="input-addo">
                  下单输入框提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet5.commodityConfig.hintText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  拍照下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet5.commodityConfig.tackPictureIcon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.commodityConfig.tackPictureIcon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.commodityConfig.tackPictureIcon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  语音下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet5.commodityConfig.soundRecording">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.commodityConfig.soundRecording">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.commodityConfig.soundRecording'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 收货地址  -->
              <div class="input-group">
                <div class="input-addo">
                  我的位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  我的地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  我的地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  我的按钮背景颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnBgColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnBgColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  我的按钮文字颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnFontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnFontColor', color: '#FFFFFF'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  我的按钮文字
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.takeDeliveryAddressConfig.btnText">
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 配送时间 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  配送时间图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet5.timeConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.timeConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.timeConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.timeConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet5.timeConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 议价 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  议价图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet5.bargainingConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.bargainingConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.bargainingConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.bargainingConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet5.bargainingConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 会员折扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  会员折扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet5.discountConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.discountConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.discountConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.discountConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet5.discountConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 积分抵扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  积分抵扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet5.integralDeductionConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.integralDeductionConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.integralDeductionConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.integralDeductionConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet5.integralDeductionConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>
              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 小时计费 -->
              <div class="input-group">
                <div class="input-addo">
                  小时计费文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.priceConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小时计费是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet5.priceConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 小费 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  小费图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet5.gratuityConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.gratuityConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.gratuityConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.gratuityConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet5.gratuityConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 红包 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  红包图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet5.couponConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.couponConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.couponConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.couponConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet5.couponConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 留言 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  留言图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet5.leaveWordConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet5.leaveWordConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet5.leaveWordConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.leaveWordConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言输入提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet5.leaveWordConfig.inputHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet5.leaveWordConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 协议设置 -->
              <div class="input-group">
                <div class="input-addo">
                  协议名称
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入协议名称"
                         v-model="pageConfig.mainConfig.templet5.protocolConfig.title">
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  协议名称颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet5.protocolConfig.fontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet5.protocolConfig.fontColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <!--<div class="input-group">
                <div class="input-addo">
                  协议跳转链接
                </div>
                <div class="input-control">
                  <select class="text-input"
                          v-model="pageConfig.mainConfig.templet5.protocolConfig.linkedUrl">
                    <option value="">请选择</option>
                    <option v-bind:value="linkedItem.id" v-for="linkedItem in linkedArr">
                      {{linkedItem.title}}
                    </option>
                  </select>
                </div>
              </div>-->
              <!-- 分割 -->
              <div class="dashed-break-up"></div>

            </div>

            <!-- 模板六 -->
            <div v-if="templetType == 6">
              <!-- 下单  -->
              <div class="input-group">
                <div class="input-addo">
                  下单输入框提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet6.commodityConfig.hintText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  拍照下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet6.commodityConfig.tackPictureIcon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.commodityConfig.tackPictureIcon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.commodityConfig.tackPictureIcon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  语音下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet6.commodityConfig.soundRecording">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.commodityConfig.soundRecording">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.commodityConfig.soundRecording'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 我的位置  -->
              <div class="input-group">
                <div class="input-addo">
                  购买位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet6.mineAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  购买地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet6.mineAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  购买地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet6.mineAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.mineAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.mineAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 目标位置  -->
              <div class="input-group">
                <div class="input-addo">
                  购买位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet6.targetAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  购买地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet6.targetAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  购买地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet6.targetAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.targetAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.targetAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 配送时间 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  配送时间图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet6.timeConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.timeConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.timeConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet6.timeConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet6.timeConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 议价 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  议价图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet6.bargainingConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.bargainingConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.bargainingConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet6.bargainingConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet6.bargainingConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 会员折扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  会员折扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet6.discountConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.discountConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.discountConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet6.discountConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet6.discountConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 积分抵扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  积分抵扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet6.integralDeductionConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.integralDeductionConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.integralDeductionConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet6.integralDeductionConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet6.integralDeductionConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 小费 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  小费图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet6.gratuityConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.gratuityConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.gratuityConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet6.gratuityConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet6.gratuityConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 红包 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  红包图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet6.couponConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.couponConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.couponConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet6.couponConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet6.couponConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 留言 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  留言图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet6.leaveWordConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet6.leaveWordConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet6.leaveWordConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet6.leaveWordConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言输入提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet6.leaveWordConfig.inputHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet6.leaveWordConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 协议设置 -->
              <div class="input-group">
                <div class="input-addo">
                  协议名称
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入协议名称"
                         v-model="pageConfig.mainConfig.templet6.protocolConfig.title">
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  协议名称颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet6.protocolConfig.fontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet6.protocolConfig.fontColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <!--<div class="input-group">
                <div class="input-addo">
                  协议跳转链接
                </div>
                <div class="input-control">
                  <select class="text-input"
                          v-model="pageConfig.mainConfig.templet6.protocolConfig.linkedUrl">
                    <option value="">请选择</option>
                    <option v-bind:value="linkedItem.id" v-for="linkedItem in linkedArr">
                      {{linkedItem.title}}
                    </option>
                  </select>
                </div>
              </div>-->
              <!-- 分割 -->
              <div class="dashed-break-up"></div>

            </div>

            <!-- 模板七 -->
            <div v-if="templetType == 7">
              <!-- 下单  -->
              <div class="input-group">
                <div class="input-addo">
                  下单输入框提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet7.commodityConfig.hintText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  拍照下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet7.commodityConfig.tackPictureIcon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.commodityConfig.tackPictureIcon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.commodityConfig.tackPictureIcon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  语音下单图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet7.commodityConfig.soundRecording">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.commodityConfig.soundRecording">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.commodityConfig.soundRecording'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 帮我送 -->
              <div class="input-group">
                <div class="input-addo">
                  购买位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet7.largessAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  购买地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet7.largessAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  购买地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet7.largessAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.largessAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.largessAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>


              <!-- 收货地址  -->
              <div class="input-group">
                <div class="input-addo">
                  收货位置提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.hintLocationText">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货地址提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                         v-model="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.hintAddressText">
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  收货地址图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货按钮背景颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnBgColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnBgColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  收货按钮文字颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnFontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnFontColor', color: '#FFFFFF'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  收货按钮文字
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.takeDeliveryAddressConfig.btnText">
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 配送时间 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  配送时间图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet7.timeConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.timeConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.timeConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.timeConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  配送时间是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet7.timeConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 议价 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  议价图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet7.bargainingConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.bargainingConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.bargainingConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.bargainingConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  议价是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet7.bargainingConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 会员折扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  会员折扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet7.discountConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.discountConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.discountConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.discountConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  会员折扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet7.discountConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 积分抵扣 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  积分抵扣图标
                </div>
                <div class="banner-img">
                  <img class="banner-img"
                       v-bind:src="pageConfig.mainConfig.templet7.integralDeductionConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.integralDeductionConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.integralDeductionConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.integralDeductionConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  积分抵扣是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet7.integralDeductionConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 物品重量 -->
              <div class="input-group">
                <div class="input-addo">
                  物品重量文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.weightConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  物品重量是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet7.weightConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 小费 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  小费图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet7.gratuityConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.gratuityConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.gratuityConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.gratuityConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  小费是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet7.gratuityConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 红包 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  红包图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet7.couponConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.couponConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.couponConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.couponConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  红包是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet7.couponConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 留言 -->
              <div class="notify-editor-group">
                <div class="input-addo">
                  留言图标
                </div>
                <div class="banner-img">
                  <img class="banner-img" v-bind:src="pageConfig.mainConfig.templet7.leaveWordConfig.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                           v-model="pageConfig.mainConfig.templet7.leaveWordConfig.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal"
                            data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.templet7.leaveWordConfig.icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言文字提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.leaveWordConfig.textHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言输入提示
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入显示文字"
                         v-model="pageConfig.mainConfig.templet7.leaveWordConfig.inputHint">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  留言是否启用
                </div>
                <div class="input-control">
                  <el-switch
                    v-model="pageConfig.mainConfig.templet7.leaveWordConfig.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    inactive-value="0"
                    active-value="1"
                    size="mini">
                  </el-switch>
                </div>
              </div>

              <!-- 分割 -->
              <div class="dashed-break-up"></div>

              <!-- 协议设置 -->
              <div class="input-group">
                <div class="input-addo">
                  协议名称
                </div>
                <div class="input-control">
                  <input type="text" class="text-input" placeholder="输入协议名称"
                         v-model="pageConfig.mainConfig.templet7.protocolConfig.title">
                </div>
              </div>
              <div class="input-group">
                <div class="input-addo">
                  协议名称颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input"
                         v-model="pageConfig.mainConfig.templet7.protocolConfig.fontColor">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.mainConfig.templet7.protocolConfig.fontColor', color: '#28A745'})">
                    重置
                  </button>
                </div>
              </div>
              <!--<div class="input-group">
                <div class="input-addo">
                  协议跳转链接
                </div>
                <div class="input-control">
                  <select class="text-input"
                          v-model="pageConfig.mainConfig.templet7.protocolConfig.linkedUrl">
                    <option value="">请选择</option>
                    <option v-bind:value="linkedItem.id" v-for="linkedItem in linkedArr">
                      {{linkedItem.title}}
                    </option>
                  </select>
                </div>
              </div>-->
              <!-- 分割 -->
              <div class="dashed-break-up"></div>

            </div>
          </div>
          <!-- 保存 -->
          <el-button type="success" size="small" class="display m-top submit-btn" @click="submitData()">立即保存</el-button>

          <!-- 系统弹窗 -->
          <div class="alert alert-warning alert-dismissible fade windowAlert"
               v-bind:class="{'show':windowAlert.isShow}"
               role="alert">
            <strong>{{windowAlert.hintText}}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>


          <!-- 图片库 -->
          <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
               aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered photo-library" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLongTitle">{{photoLibrary.title}}</h5>
                  <input type="hidden">
                  <button type="button" class="btn btn-primary btn-sm image-upload-btn" data-toggle="modal"
                          data-target="#exampleModal"><i class="fa fa-cloud-upload"></i> 图片上传
                  </button>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="image-groups">
                    <div class="image-item" v-for="photoItem in photoLibrary.photos">
                      <i class="fa-li fa fa-remove remove-icon image-item-icon"
                         @click="delPhoto({linked: photoItem})"></i>
                      <img v-bind:src="photoItem" title="图片" data-dismiss="modal" ref="choosePhoto"
                           @click="choosePhoto({linked: photoItem})">
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">
                    {{photoLibrary.returnBtnText}}
                  </button>
                  <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
              </div>
            </div>
          </div>


          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
               aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">图片上传</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body file-upload-module">

                  <div style="margin-bottom: 20px">
                    <h4>选择图片</h4>
                    <a id='addPic' class="btn btn-info btn-sm" href="" @click="addPic">添加图片 </a>
                    <input type="file" id="uploadFile" @change="onFileChange" multiple
                           style="display: none;">
                  </div>
                  <div v-if="images.length >0">
                    <ul>
                      <li v-for="(image,key) in images">
                        <img :src="image" @click='delImage(key)'/>
                        <a href="#" style="position: absolute;" @click='delImage(key)'>
                          <span class="glyphicon glyphicon-remove"></span>
                        </a>
                      </li>
                    </ul>

                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-danger btn-sm" @click="removeImage">移除全部图片</button>
                  <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal"
                          @click='uploadImage'>上传
                  </button>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,  // 页面加载
        name: 'order_template',  // 模板名称
        pageConfig: {    // 页面配置数据格式
          titleConfig: {
            pageTitle: "跑腿",    // 标题
            navigationBgColor: '#FFFFFF',   // 背景颜色
            fontColor: '#000000'    // 文字颜色
          },
          mainConfig: {
            templet1: {  // 模板1 => 帮我买
              commodityConfig: {	// 商品填写
                hintText: '请输入商品',	// 提示填写信息
                tackPictureIcon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon1.png',	// 拍照图标
                soundRecording: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon2.png'	// 录音图标
              },
              buyAddressConfig: {	// 购买地址
                hintLocationText: '点击选择购买地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon0.png'	// 图标
              },
              takeDeliveryAddressConfig: {	// 收货地址
                hintLocationText: '点击选择我的地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon4.png',	// 图标
                btnBgColor: '#28A745',	// 按钮背景颜色
                btnFontColor: '#FFFFFF',	// 按钮文字颜色
                btnText: '常用'	// 按钮文字
              },
              timeConfig: {	// 时间
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon8.png',	// 图标
                textHint: '选择配送时间',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              bargainingConfig: {	// 议价
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon7.png',	// 图标
                textHint: '是否接受议价',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              discountConfig: {	// 会员折扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon14.png',	// 图标
                textHint: '会员折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              integralDeductionConfig: {	// 积分抵扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon15.png',	// 图标
                textHint: '积分折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              gratuityConfig: {	// 小费
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon6.png',	// 图标
                textHint: '小费',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              couponConfig: {	// 红包
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon5.png',	// 图标
                textHint: '红包',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              leaveWordConfig: {	// 留言
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon9.png',	// 图标
                textHint: '留言',	// 文字提示
                inputHint: '请输入留言内容',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              protocolConfig: {	// 协议
                title: '《代买跑腿服务协议》',	// 协议名称
                fontColor: '#28A745',	// 协议名称
                linkedUrl: ''	// 协议链接页面
              }
            },
            templet2: {  // 模板2 => 帮我送
              commodityConfig: {	// 商品填写
                hintText: '请输入商品',	// 提示填写信息
                tackPictureIcon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon1.png',	// 拍照图标
                soundRecording: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon2.png'	// 录音图标
              },
              largessAddressConfig: {	// 购买地址
                hintLocationText: '点击选择取货地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/largess/b-icon1.png'	// 图标
              },
              takeDeliveryAddressConfig: {	// 收货地址
                hintLocationText: '点击选择我的地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon4.png',	// 图标
                btnBgColor: '#28A745',	// 按钮背景颜色
                btnFontColor: '#FFFFFF',	// 按钮文字颜色
                btnText: '常用'	// 按钮文字
              },
              multiImageUploadConfig: {	// 多图上传
                textHint: '图片集合',	// 文字提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon4.png',	// 图标
                btnBgColor: '#28A745',	// 按钮背景颜色
                btnFontColor: '#FFFFFF',	// 按钮文字颜色
                btnText: '图片上传',	// 按钮文字
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              timeConfig: {	// 时间
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon8.png',	// 图标
                textHint: '选择配送时间',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              bargainingConfig: {	// 议价
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon7.png',	// 图标
                textHint: '是否接受议价',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              discountConfig: {	// 会员折扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon14.png',	// 图标
                textHint: '会员折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              integralDeductionConfig: {	// 积分抵扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon15.png',	// 图标
                textHint: '积分折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              weightConfig: {  // 重量配置
                textHint: '货物重量：',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              gratuityConfig: {	// 小费
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon6.png',	// 图标
                textHint: '小费',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              couponConfig: {	// 红包
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon5.png',	// 图标
                textHint: '红包',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              leaveWordConfig: {	// 留言
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon9.png',	// 图标
                textHint: '留言',	// 文字提示
                inputHint: '请输入留言内容',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              protocolConfig: {	// 协议
                title: '《代买跑腿服务协议》',	// 协议名称
                fontColor: '#28A745',	// 协议名称
                linkedUrl: ''	// 协议链接页面
              }
            },
            templet3: {  // 模板3 => 帮排队
              serviceConfig: {    // 服务
                title: '请选择服务类型',   // 服务标题
                titleFontColor: '#333333', // 标题文字颜色
                serviceBtnBgColor: '#DC3545', // 服务按钮背景颜色
                serviceBtnFontColor: '#FFFFFF', // 服务按钮文字颜色
                serviceGroups: [
                  {
                    name: '帮挂号',    // 名称
                    takeDeliveryAddresEnabled: 1,   // 收货地址是否启用 0 => 不启用, 1 => 启用
                  }
                ]
              },
              buyAddressConfig: {	// 排队地址
                hintLocationText: '点击选择排队地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/line-up/b-icon2.png'	// 图标
              },
              takeDeliveryAddressConfig: {	// 收货地址
                hintLocationText: '点击选择我的地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon4.png',	// 图标
                btnBgColor: '#28A745',	// 按钮背景颜色
                btnFontColor: '#FFFFFF',	// 按钮文字颜色
                btnText: '常用'	// 按钮文字
              },
              timeConfig: {	// 时间
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon8.png',	// 图标
                textHint: '选择配送时间',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              bargainingConfig: {	// 议价
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon7.png',	// 图标
                textHint: '是否接受议价',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              discountConfig: {	// 会员折扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon14.png',	// 图标
                textHint: '会员折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              integralDeductionConfig: {	// 积分抵扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon15.png',	// 图标
                textHint: '积分折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              gratuityConfig: {	// 小费
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon6.png',	// 图标
                textHint: '小费',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              couponConfig: {	// 红包
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon5.png',	// 图标
                textHint: '红包',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              leaveWordConfig: {	// 留言
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon9.png',	// 图标
                textHint: '留言',	// 文字提示
                inputHint: '请输入留言内容',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              protocolConfig: {	// 协议
                title: '《代买跑腿服务协议》',	// 协议名称
                fontColor: '#28A745',	// 协议名称
                linkedUrl: ''	// 协议链接页面
              }
            },
            templet4: {  // 模板4 => 代办
              commodityConfig: {	// 商品填写
                hintText: '请输入商品',	// 提示填写信息
                tackPictureIcon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon1.png',	// 拍照图标
                soundRecording: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon2.png'	// 录音图标
              },
              transactAddressConfig: {	// 办理地址
                hintLocationText: '点击选择办理地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/largess/2_03.png'	// 图标
              },
              takeDeliveryAddressConfig: {	// 收货地址
                hintLocationText: '点击选择我的地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/largess/2_05.png',	// 图标
                btnBgColor: '#28A745',	// 按钮背景颜色
                btnFontColor: '#FFFFFF',	// 按钮文字颜色
                btnText: '常用'	// 按钮文字
              },
              timeConfig: {	// 时间
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon8.png',	// 图标
                textHint: '选择收货时间',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              bargainingConfig: {	// 议价
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon7.png',	// 图标
                textHint: '是否接受议价',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              discountConfig: {	// 会员折扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon14.png',	// 图标
                textHint: '会员折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              integralDeductionConfig: {	// 积分抵扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon15.png',	// 图标
                textHint: '积分折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              priceConfig: {  // 价格配置
                textHint: '代办费用：',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              gratuityConfig: {	// 小费
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon6.png',	// 图标
                textHint: '小费',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              couponConfig: {	// 红包
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon5.png',	// 图标
                textHint: '红包',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              leaveWordConfig: {	// 留言
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon9.png',	// 图标
                textHint: '留言',	// 文字提示
                inputHint: '请输入留言内容',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              protocolConfig: {	// 协议
                title: '《代买跑腿服务协议》',	// 协议名称
                fontColor: '#28A745',	// 协议名称
                linkedUrl: ''	// 协议链接页面
              }
            },
            templet5: {  // 模板1 => 帮我买
              commodityConfig: {	// 商品填写
                hintText: '请输入商品',	// 提示填写信息
                tackPictureIcon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon1.png',	// 拍照图标
                soundRecording: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon2.png'	// 录音图标
              },
              takeDeliveryAddressConfig: {	// 收货地址
                hintLocationText: '点击选择我的地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/largess/2_05.png',	// 图标
                btnBgColor: '#28A745',	// 按钮背景颜色
                btnFontColor: '#FFFFFF',	// 按钮文字颜色
                btnText: '常用'	// 按钮文字
              },
              timeConfig: {	// 时间
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon8.png',	// 图标
                textHint: '选择服务时间',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              bargainingConfig: {	// 议价
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon7.png',	// 图标
                textHint: '是否接受议价',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              discountConfig: {	// 会员折扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon14.png',	// 图标
                textHint: '会员折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              integralDeductionConfig: {	// 积分抵扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon15.png',	// 图标
                textHint: '积分折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              priceConfig: {  // 价格配置
                textHint: '小时费用：',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              gratuityConfig: {	// 小费
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon6.png',	// 图标
                textHint: '小费',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              couponConfig: {	// 红包
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon5.png',	// 图标
                textHint: '红包',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              leaveWordConfig: {	// 留言
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon9.png',	// 图标
                textHint: '留言',	// 文字提示
                inputHint: '请输入留言内容',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              protocolConfig: {	// 协议
                title: '《代买跑腿服务协议》',	// 协议名称
                fontColor: '#28A745',	// 协议名称
                linkedUrl: ''	// 协议链接页面
              }
            },
            templet6: {  // 模板1 => 帮我买
              commodityConfig: {	// 商品填写
                hintText: '请输入商品',	// 提示填写信息
                tackPictureIcon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon1.png',	// 拍照图标
                soundRecording: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon2.png'	// 录音图标
              },
              mineAddressConfig: {	// 我的地址
                hintLocationText: '点击选择购买地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/largess/2_03.png'	// 图标
              },
              targetAddressConfig: {	// 目标地址
                hintLocationText: '点击选择购买地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/largess/2_05.png'	// 图标
              },
              timeConfig: {	// 时间
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon8.png',	// 图标
                textHint: '选择配送时间',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              bargainingConfig: {	// 议价
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon7.png',	// 图标
                textHint: '是否接受议价',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              discountConfig: {	// 会员折扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon14.png',	// 图标
                textHint: '会员折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              integralDeductionConfig: {	// 积分抵扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon15.png',	// 图标
                textHint: '积分折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              gratuityConfig: {	// 小费
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon6.png',	// 图标
                textHint: '小费',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              couponConfig: {	// 红包
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon5.png',	// 图标
                textHint: '红包',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              leaveWordConfig: {	// 留言
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon9.png',	// 图标
                textHint: '留言',	// 文字提示
                inputHint: '请输入留言内容',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              protocolConfig: {	// 协议
                title: '《代买跑腿服务协议》',	// 协议名称
                fontColor: '#28A745',	// 协议名称
                linkedUrl: ''	// 协议链接页面
              }
            },
            templet7: {  // 模板2 => 帮我取
              commodityConfig: {	// 商品填写
                hintText: '请输入商品',	// 提示填写信息
                tackPictureIcon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon1.png',	// 拍照图标
                soundRecording: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon2.png'	// 录音图标
              },
              largessAddressConfig: {	// 购买地址
                hintLocationText: '点击选择取货地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/largess/b-icon1.png'	// 图标
              },
              takeDeliveryAddressConfig: {	// 收货地址
                hintLocationText: '点击选择我的地址',	// 位置信息填写提示
                hintAddressText: '请输入详细地址，如楼层门牌号',	// 地址信息填写提示
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/b-icon4.png',	// 图标
                btnBgColor: '#28A745',	// 按钮背景颜色
                btnFontColor: '#FFFFFF',	// 按钮文字颜色
                btnText: '常用'	// 按钮文字
              },
              timeConfig: {	// 时间
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon8.png',	// 图标
                textHint: '选择配送时间',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              bargainingConfig: {	// 议价
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon7.png',	// 图标
                textHint: '是否接受议价',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              discountConfig: {	// 会员折扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon14.png',	// 图标
                textHint: '会员折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              integralDeductionConfig: {	// 积分抵扣
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon15.png',	// 图标
                textHint: '积分折扣',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              weightConfig: {  // 重量配置
                textHint: '货物重量：',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              gratuityConfig: {	// 小费
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon6.png',	// 图标
                textHint: '小费',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              couponConfig: {	// 红包
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon5.png',	// 图标
                textHint: '红包',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              leaveWordConfig: {	// 留言
                icon: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/buy/icon9.png',	// 图标
                textHint: '留言',	// 文字提示
                inputHint: '请输入留言内容',	// 文字提示
                enabled: '1'	// 是否启用 0 => 不启用, 1 => 启用
              },
              protocolConfig: {	// 协议
                title: '《代买跑腿服务协议》',	// 协议名称
                fontColor: '#28A745',	// 协议名称
                linkedUrl: ''	// 协议链接页面
              }
            },
          }
        },
        templetType: '1',   // 模板类型 (1 => 帮我买，2 => 帮我送，3 => 帮排队)
        appEditorConfig: {
          currentEditor: 'head',
          fixedPosition: {
            'top': '0px'
          }
        },
        windowAlert: {
          hintText: '',
          isShow: false,
          defaultTimeOut: 2000
        },
        photoLibrary: {
          title: '图片库',
          returnBtnText: '返回',
          dataUrl: '',
          photos: [
            // {
            //     title: '广播',
            //     photoUrl: 'images/notify.png'
            // },
            // {
            //     title: '轮播',
            //     photoUrl: 'images/banner.png'
            // }
          ]
        },
        linkedArr: [],  // 链接数组
        images: []  // 图片上传
      }
    },
    mounted: function () {
      let _this = this;

      // 默认数据加载
      this.api.getOrderTemplate().then(function (res) {
        if (res.code == 1) {
          _this.name = res.data.name;
          _this.pageConfig = res.data.value;
        }
        _this.loading = false;
      }).catch(function (res) {
        throw new Error(res);
      });

      // 链接加载
      this.api.getIndexLinkedUrl().then(function (res) {
        if (res.code == 1) {
          _this.linkedArr = res.data;
        }
      }).catch(function (res) {
        throw new Error(res);
      });

      // 图片加载
      _this.loadImageLibary();
    },
    methods: {
      /**
       * 加载图片库
       * */
      loadImageLibary: function () {
        let _this = this;
        this.api.getImageLibary().then(function (res) {
          if (res.code == 1) {
            // res.data 回传回来的JSON数组
            let arr = []; // 定义数组对象
            arr = res.data; // 自动将JSON数组转换为数组并且可以操作相关的API类库
            _this.photoLibrary.photos = arr;
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      navigationBgColorReset: function () {   // 导航背景颜色重置
        let defaultColor = '#FFFFFF';
        this.pageConfig.titleConfig.navigationBgColor = defaultColor;
      },
      chooseAppView: function ({viewName}) {  // 切换编辑器显示状态
        const HEAD = 'head';
        const MAIN = 'main';
        const NAV = 'nav';
        if (viewName == HEAD) {
          this.appEditorConfig.currentEditor = HEAD;
          this.appEditorConfig.fixedPosition = {
            'top': '0px'
          }
        }

        if (viewName == MAIN) {
          this.appEditorConfig.currentEditor = MAIN;
          this.appEditorConfig.fixedPosition = {
            'top': '100px'
          }
        }

        if (viewName == NAV) {
          this.appEditorConfig.currentEditor = NAV;
          this.appEditorConfig.fixedPosition = {
            'top': '500px'
          }
        }

      },
      defaultColorReset: function ({dataLinked: dataLinked, color: color}) {   // 默认颜色重置
        let defaultColor = color;
        eval('this.' + dataLinked + '="' + defaultColor + '"');
      },
      appendServiceItem: function () {  // 添加服务
        let service = {};
        this.$set(service, 'name', '');
        this.$set(service, 'takeDeliveryAddresEnabled', '1');
        this.pageConfig.mainConfig.templet3.serviceConfig.serviceGroups.push(service);
      },
      removeServiceItem: function ({index: index}) {  // 删除服务
        if (this.pageConfig.mainConfig.templet3.serviceConfig.serviceGroups.length <= 1) {
          this.$message({
            showClose: true,
            message: '删除最少保留一个',
            type: 'warning'
          });
          return false;
        }
        this.removeItemByIndex({index: index, data: this.pageConfig.mainConfig.templet3.serviceConfig.serviceGroups});
      },
      removeItemByIndex: function ({index: index, data: data}) {  // 根据下标删除
        for (let i = index; i < data.length; i++) {
          if (i >= data.length - 1) {
            data.pop();
          } else {
            data[i] = data[i + 1];
          }
        }
      },
      choosePhoto: function ({linked: linked}) {  // 图片选择
        eval(this.photoLibrary.dataUrl + "='" + linked + "'");
      },
      delPhoto: function ({linked: linked}) { // 图片删除
        let _this = this;
        _this.api.delImageFromImageLibary({
          src: linked
        }).then(function (res) {
          if (res.code == 1) {
            _this.loadImageLibary();
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      },
      openPhotoLibrary: function ({dataLinked: dataLinked}) {
        this.photoLibrary.dataUrl = 'this.' + dataLinked;
      },
      addPic(e) {
        e.preventDefault();
        this.$('#uploadFile').trigger('click');
        return false;
      },
      onFileChange(e) {
        let files = e.target.files;
        if (!files.length) return;
        this.createImage(files);
      },
      createImage(file) {
        if (typeof FileReader === 'undefined') {
          alert('您的浏览器不支持图片上传，请升级您的浏览器');
          return false;
        }
        let image = new Image();
        let vm = this;
        let leng = file.length;
        for (let i = 0; i < leng; i++) {
          let reader = new FileReader();
          reader.readAsDataURL(file[i]);
          reader.onload = function (e) {
            vm.images.push(e.target.result);
          };
        }
      },
      delImage: function (index) {
        this.images.shift(index);
      },
      removeImage: function (e) {
        this.images = [];
      },
      uploadImage: function () {
        let _this = this;
        this.api.uploadImageAlwaysImageLibary({
          images: _this.images
        }, "index").then(function (res) {
          if (res.code == 1) {
            let tempPhotos = _this.photoLibrary.photos.reverse();
            res.data.forEach(function (item, index) {
              tempPhotos.push(item);
            });
            tempPhotos.reverse();
            _this.removeImage();

            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      submitData: function () {
        let _this = this;
        _this.api.updateTemplate({
          name: _this.name,
          value: _this.pageConfig
        }).then(function (res) {
          if (res.code == 1) {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    }
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .container {
    width: 100%;
    margin: 0 15px;
  }

  .none {
    display: none;
  }

  a, input {
    outline: none;
  }

  input {
    border-style: none;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
  }

  ::-webkit-scrollbar {
    width: 0px; /*滚动条宽度*/
    height: 0px; /*滚动条高度*/
  }

  /* 系统弹窗 */
  .windowAlert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 99999;
    transition: all .5s ease 0s;
  }

  /* 图片库 */
  .photo-library {
    max-width: 1000px !important;
    max-height: 700px !important;
  }

  .photo-library .modal-body {
    max-height: 550px;
    height: 550px;
    overflow-y: auto;
  }

  .photo-library .image-groups {
    width: 100%;
  }

  .photo-library .image-item {
    display: block;
    width: 160px;
    height: 110px;
    background: #FFFFFF;
    border: 3px solid #f2f2f2;
    border-radius: 5px;
    float: left;
    margin: 10px;
  }

  .photo-library .image-item img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .image-upload-btn {
    margin-left: 780px;
  }

  /* 图片上传 */
  .file-upload-module {
    max-height: 550px;
    height: 550px;
    overflow: auto;
  }

  .file-upload-module ul {
    list-style-type: none;
  }

  .file-upload-module img {
    width: 150px;
    height: 150px;
    display: block;
    margin: 15px auto;
  }

  /* 图片删除 */
  .image-item {
    position: relative;
  }

  .photoItem {
    position: absolute;
    z-index: 99;
  }

  .image-item-icon {
    position: absolute;
    z-index: 999;
    left: 115px;
    top: 5px;
    display: block;
    background: red;
    border-radius: 999px;
    color: #ffffff;
  }

  /* 手机模型 */
  .app-preview {
    background: #FFF;
    width: 375px;
    height: 667px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 20px 0;
    padding: 15px;
    float: left;
    position: fixed;
    top: 100px;
  }

  /* 顶部 */
  .app-head {
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: relative;
  }

  .app-head:before {
    content: "";
    position: absolute;
    top: 18px;
    left: 140px;
    height: 8px;
    width: 8px;
    background: #ddd;
    border-radius: 8px;
  }

  .app-head:after {
    content: "";
    position: absolute;
    top: 18px;
    left: 160px;
    height: 8px;
    width: 50px;
    background: #ddd;
    border-radius: 8px;
  }

  /* 内容 */
  .app-content {
    width: 100%;
    height: 550px;
    background: #FFF;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
  }

  .app-content > .active {
    border: 2px dashed green;
  }

  /*  内容顶部 */
  .app-content .app-content-title {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
  }

  /* 内容主要区域 */
  .app-content-main {
    height: 498px;
    overflow-y: auto;
  }

  /*----------------- 导航 ------------------ */
  .app-content-nav {
    height: 48px;
    line-height: 48px;
    display: flex;
    border-top: 1px solid #eee;
  }

  .app-content-nav-item {
    flex: 1;
  }

  .app-content-nav-item-icon {
    width: 20px;
    height: 20px;
    display: block;
    margin: 2px auto;
  }

  .app-content-nav-item-text {
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  /*----------------- 导航 ------------------ */

  /* 底部 */
  .app-footer {
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: relative;
  }

  .app-footer:before {
    content: "";
    position: absolute;
    top: 12px;
    left: 150px;
    height: 30px;
    width: 60px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  /* -------------------- 编辑工具 --------------------------- */
  .app-editor {
    border: 1px solid #ddd;
    width: 650px;
    min-height: 100px;
    float: left;
    margin: 50px 0 50px 400px;
    position: relative;
    border-radius: 10px;
    padding: 15px 15px 30px;
    transition: all .5s ease 0s;
  }

  .app-editor:before {
    position: absolute;
    content: "◆";
    top: 30px;
    left: -11px;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
    color: rgb(255, 255, 255);
    z-index: 111;
  }

  .app-editor:after {
    position: absolute;
    content: "◆";
    top: 30px;
    left: -12px;
    color: rgb(221, 221, 221);
    z-index: 11;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
  }

  /* 页面 */
  .app-editor .input-group {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
    font-size: 12px;
    color: #666;
  }

  .app-editor .input-group .input-addo {
    min-width: 100px;
    text-align: right;
    margin-right: 15px;
  }

  .app-editor .input-group .input-control {
    background: #ffffff;
  }

  .app-editor .input-group .text-input {
    height: 100%;
    width: 500px;
    padding: 0 5px;
    border: 1px solid #ddd;
    color: #666;
    margin: 0;
  }

  .app-editor .input-group .color-input {
    min-width: 405px;
    height: 100%;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
    padding: 3px;
  }

  .app-editor .input-group .color-reset-btn {
    height: 100%;
    line-height: 100%;
    padding: 0 35px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .app-editor .input-group .radio-input {
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
  }

  .app-editor .input-group .radio-input-label {
    margin: 0 15px 0 3px;
  }

  .app-editor .dashed-break-up {
    width: 100%;
    border-bottom: 1px dashed #dddddd;
    margin: 0 0 15px;
  }

  /* 系统通知 */
  .app-editor .notify-editor-group {
    width: 615px;
    overflow: hidden;
    font-size: 12px;
    margin: 0 0 15px;
    border-radius: 5px;
    position: relative;
  }

  .app-editor .notify-editor-group .input-addo {
    float: left;
    min-width: 100px;
    text-align: right;
    margin-right: 15px;
    height: 60px;
    line-height: 60px;
    color: #666;
  }

  .app-editor .notify-editor-group .banner-img {
    height: 50px;
    width: 50px;
    float: left;
    margin: 3px 0;
  }

  .app-editor .notify-editor-group .input-control {
    float: left;
    margin-left: 15px;
  }

  .app-editor .notify-editor-group .input-item {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
  }

  .app-editor .notify-editor-group .text-input {
    width: 335px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .notify-editor-group .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  /* banner添加 */
  .app-editor .banner-editor-group {
    width: 615px;
    overflow: hidden;
    font-size: 12px;
    border: 1px solid #ddd;
    margin: 0 0 15px;
    border-radius: 5px;
    position: relative;
  }

  .app-editor .banner-editor-group .banner-img {
    height: 100px;
    width: 100px;
    float: left;
    margin: 1px;
  }

  .app-editor .banner-editor-group .banner-input-group {
    float: left;
    margin-left: 15px;
  }

  .app-editor .banner-editor-group .banner-input-item {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
  }

  .app-editor .banner-editor-group .text-input {
    width: 390px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .banner-editor-group .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .app-editor .banner-editor-group .select {
    width: 490px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .banner-editor-group .remove-icon {
    position: absolute;
    top: 3px;
    left: 588px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .6);
    color: #FFFFFF;
  }

  .app-editor .append-btn {
    width: 615px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    padding: 0;
    margin: 0 0 15px;
    border-color: #dddddd;
  }

  /* 入口添加 */
  .list-group {
    margin: 0 0 15px;
    position: relative;
  }

  .list-group .ingress-input-group {
    width: 600px;
    margin: 15px 0;
    font-size: 12px;
    overflow: hidden;
  }

  .list-group .active {
    background: #F9FCEF;
    border: 1px solid rgba(0, 0, 0, .125);
  }

  .list-group .list-group-item {
    position: relative;
    color: #666;
  }

  .list-group .ingress-input-group .input-addo {
    min-width: 50px;
    text-align: right;
    margin-right: 15px;
    float: left;
    height: 30px;
    line-height: 30px;
  }

  .list-group .ingress-input-group .input-control {
    overflow: hidden;
    float: left;
    background: none;
  }

  .list-group .ingress-input-group .text-input {
    height: 30px;
    line-height: 30px;
    width: 510px;
    padding: 0 5px;
    color: #666;
    border: 1px solid #dddddd;
  }

  .list-group .ingress-icon {
    width: 615px;
    overflow: hidden;
    font-size: 12px;
    border-radius: 5px;
  }

  .list-group .ingress-icon .input-addo {
    float: left;
    min-width: 50px;
    text-align: right;
    margin-right: 15px;
    height: 60px;
    line-height: 60px;
    color: #FFFFFF;
  }

  .list-group .ingress-icon .icon-img {
    height: 50px;
    width: 50px;
    float: left;
    margin: 3px 0;
  }

  .list-group .ingress-icon .input-control {
    float: left;
    margin-left: 15px;
  }

  .list-group .ingress-icon .input-item {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
  }

  .list-group .ingress-icon .text-input {
    width: 321px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .list-group .ingress-icon .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .list-group .ingress-input-group-children {
    width: 590px;
    overflow: hidden;
    font-size: 12px;
    border-radius: 5px;
  }

  .list-group .ingress-input-group-children .ingress-img {
    height: 100px;
    width: 100px;
    float: left;
    margin: 1px;
  }

  .list-group .ingress-input-group-children .input-group {
    float: left;
    margin-left: 15px;
    width: 455px;
  }

  .list-group .ingress-input-group-children .input-item {
    height: 30px;
    line-height: 30px;
    margin: 4px 0;
  }

  .list-group .ingress-input-group-children .text-input {
    width: 355px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
    background: #FFFFFF;
  }

  .list-group .ingress-input-group-children .input-item:first-child .text-input {
    width: 455px;
  }

  .list-group .ingress-input-group .radio-input, .list-group .ingress-input-group .radio-input-label {
    position: relative;
    top: 5px;
  }

  .list-group .ingress-input-group .radio-input-label {
    margin-right: 10px;
  }

  .list-group .ingress-input-group-children .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .list-group .remove-icon {
    position: absolute;
    top: 4px;
    left: 592px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .6);
    color: #FFFFFF;
    z-index: 10;
  }

  .list-group select {
    background: #FFFFFF !important;
  }

  /* 标签添加 */
  .tag-group {
    overflow: hidden;
  }

  .tag-group .input-addo {
    min-width: 50px !important;
    width: auto;
    margin: 0;
  }

  .add-tags .tags {
    height: 20px;
    line-height: 20px;
    margin: 7px 0;
    overflow: hidden;
  }

  .add-tags .tags-item {
    background: green;
    color: #FFFFFF;
    border-radius: 2px;
    padding: 0 10px;
    margin: 0 5px;
    float: left;
  }

  .add-tags .tags-item .fa {
    margin: 0 2px;
  }

  .submit-btn{
    position: fixed;
    top: 180px;
    left: 1300px;
    height: 150px;
    font-size: 24px;
    width: 24px;
    white-space: pre-wrap;
    margin: 0;
    padding: 0 40px 0 20px;
    text-align: center;
  }

  /* -------------------- 编辑工具 --------------------------- */

  /*----------------- 样式一 (帮我买) ------------------ */
  .templet1 {
    font-size: 12px;
    background: #F2F2F2;
    height: 100%;
    overflow: auto;
  }

  .templet1 .column {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* 商品输入 */
  .templet1 .ware-input {
    padding: 0;
    display: flex;
  }

  .templet1 .ware-input .textarea {
    flex: 1;
    border: none;
    padding: 5px;
  }

  .templet1 .ware-input .util-icon {
    border-left: 1px solid #dddddd;
    background: #ffffff;
    padding: 5px 0;
  }

  .templet1 .ware-input .icon-item {
    width: 30px;
    height: 30px;
    margin: 10px 20px;
  }

  /* 地址 */
  .templet1 .address-group {
    background: #ffffff;
    display: flex;
    overflow: hidden;
    padding: 10px 5px;
    justify-content: space-between;
  }

  .templet1 .address-group:first-child {
    border-bottom: 1px solid #dddddd;
  }

  .templet1 .addres-icon {
    height: 100%;
  }

  .templet1 .addres-icon .icon {
    width: 30px;
    height: 30px;
    margin: 13px 10px;
  }

  .templet1 .address-input-group {
    width: 230px;
  }

  .templet1 .address-input-item {
    border: none;
  }

  .templet1 .addres-side {
    height: 100%;
  }

  .templet1 .addres-side .icon {
    width: 10px;
    height: 10px;
    margin: 23px 15px;
  }

  .templet1 .addres-side .addres-side-btn {
    margin: 12px 10px;
    font-size: 12px;
  }

  /* 单行默认 */
  .templet1 .col {
    background: #ffffff;
    display: flex;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet1 .column .col:last-child {
    border-bottom: none;
  }

  .templet1 .col-icon {
    width: 20px;
    height: 20px;
    margin: 5px;
  }

  .templet1 .col-text {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    flex: 1;
  }

  .templet1 .col-side {
    min-width: 30px;
    height: 30px;
    float: right;
  }

  .templet1 .col-side .icon {
    width: 10px;
    height: 10px;
    margin: 10px 5px 0;
    float: right;
  }

  .templet1 .col-side .switch-icon {
    width: 30px;
    height: 15px;
    margin: 7px 0 0;
  }

  .templet1 .scaler-icon {
    width: 80px;
    height: 25px;
    margin: 5px 0 0;
  }

  .templet1 .hint-text {
    line-height: 29px;
    height: 29px;
    display: inline-block;
  }

  .templet1 .col-input {
    height: 20px;
    line-height: 20px;
    border: none;
    outline: none;
  }

  .templet1 .protocol-linked {
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
    padding: 0 10px;
  }

  .templet1 .protocol-linked .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
  }

  .templet1 .protocol-linked .protocol-text {
    color: #008000;
  }

  /*----------------- 样式一 ------------------ */

  /*----------------- 样式二 (帮我送) ------------------ */
  .templet2 {
    font-size: 12px;
    background: #F2F2F2;
    height: 100%;
    overflow: auto;
  }

  .templet2 .column {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* 商品输入 */
  .templet2 .ware-input {
    padding: 0;
    display: flex;
  }

  .templet2 .ware-input .textarea {
    flex: 1;
    border: none;
    padding: 5px;
  }

  .templet2 .ware-input .util-icon {
    border-left: 1px solid #dddddd;
    background: #ffffff;
    padding: 5px 0;
  }

  .templet2 .ware-input .icon-item {
    width: 30px;
    height: 30px;
    margin: 10px 20px;
  }

  /* 地址 */
  .templet2 .address-group {
    background: #ffffff;
    display: flex;
    overflow: hidden;
    padding: 10px 5px;
    justify-content: space-between;
  }

  .templet2 .address-group:first-child {
    border-bottom: 1px solid #dddddd;
  }

  .templet2 .addres-icon {
    height: 100%;
  }

  .templet2 .addres-icon .icon {
    width: 30px;
    height: 30px;
    margin: 13px 10px;
  }

  .templet2 .address-input-group {
    width: 230px;
  }

  .templet2 .address-input-item {
    border: none;
  }

  .templet2 .addres-side {
    height: 100%;
  }

  .templet2 .addres-side .icon {
    width: 10px;
    height: 10px;
    margin: 23px 15px;
  }

  .templet2 .addres-side .addres-side-btn {
    margin: 12px 10px;
    font-size: 12px;
  }

  /* 单行默认 */
  .templet2 .col {
    background: #ffffff;
    display: flex;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet2 .column .col:last-child {
    border-bottom: none;
  }

  .templet2 .col-icon {
    width: 20px;
    height: 20px;
    margin: 5px;
  }

  .templet2 .col-text {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    flex: 1;
  }

  .templet2 .col-side {
    min-width: 30px;
    height: 30px;
    float: right;
  }

  .templet2 .col-side .icon {
    width: 10px;
    height: 10px;
    margin: 10px 5px 0;
    float: right;
  }

  .templet2 .col-side .switch-icon {
    width: 30px;
    height: 15px;
    margin: 7px 0 0;
  }

  .templet2 .scaler-icon {
    width: 80px;
    height: 25px;
    margin: 5px 0 0;
  }

  .templet2 .hint-text {
    line-height: 29px;
    height: 29px;
    display: inline-block;
  }

  .templet2 .col-input {
    height: 20px;
    line-height: 20px;
    border: none;
    outline: none;
  }

  .templet2 .protocol-linked {
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
    padding: 0 10px;
  }

  .templet2 .protocol-linked .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
  }

  .templet2 .protocol-linked .protocol-text {
    color: #008000;
  }

  .templet2 .col-weight {
    background: #ffffff;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet2 .col-weight p {
    color: #666;
    margin: 10px;
  }

  .col-weight-color {
    color: #008000;
  }

  /* 滑块 */
  .templet2 .col-slider {
    background: #ffffff;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet2 .col-slider .slider-text {
    position: relative;
    top: 10px;
  }

  .templet2 .col-slider .weight-color {
    color: #008000;
  }

  /*----------------- 样式二 ------------------ */

  /*----------------- 样式三 (帮排队) ------------------ */
  .templet3 {
    font-size: 12px;
    background: #F2F2F2;
    height: 100%;
    overflow: auto;
  }

  .templet3 .column {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* 服务类目 */
  .templet3 .service-col {
    background: #ffffff;
    padding: 10px 15px;
    width: 100%;
    overflow: hidden;
  }

  .templet3 .service-col-title {
    padding-bottom: 0px !important;
  }

  .templet3 .service-group button {
    font-size: 12px;
    padding: 2px 5px;
    margin: 5px;
  }

  /* 地址 */
  .templet3 .address-group {
    background: #ffffff;
    display: flex;
    overflow: hidden;
    padding: 10px 5px;
    justify-content: space-between;
  }

  .templet3 .address-group:first-child {
    border-bottom: 1px solid #dddddd;
  }

  .templet3 .addres-icon {
    height: 100%;
  }

  .templet3 .addres-icon .icon {
    width: 30px;
    height: 30px;
    margin: 13px 10px;
  }

  .templet3 .address-input-group {
    width: 230px;
  }

  .templet3 .address-input-item {
    border: none;
  }

  .templet3 .addres-side {
    height: 100%;
  }

  .templet3 .addres-side .icon {
    width: 10px;
    height: 10px;
    margin: 23px 15px;
  }

  .templet3 .addres-side .addres-side-btn {
    margin: 12px 10px;
    font-size: 12px;
  }

  /* 单行默认 */
  .templet3 .col {
    background: #ffffff;
    display: flex;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet3 .column .col:last-child {
    border-bottom: none;
  }

  .templet3 .col-icon {
    width: 20px;
    height: 20px;
    margin: 5px;
  }

  .templet3 .col-text {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    flex: 1;
  }

  .templet3 .col-side {
    min-width: 30px;
    height: 30px;
    float: right;
  }

  .templet3 .col-side .icon {
    width: 10px;
    height: 10px;
    margin: 10px 5px 0;
    float: right;
  }

  .templet3 .col-side .switch-icon {
    width: 30px;
    height: 15px;
    margin: 7px 0 0;
  }

  .templet3 .scaler-icon {
    width: 80px;
    height: 25px;
    margin: 5px 0 0;
  }

  .templet3 .hint-text {
    line-height: 29px;
    height: 29px;
    display: inline-block;
  }

  .templet3 .col-input {
    height: 20px;
    line-height: 20px;
    border: none;
    outline: none;
  }

  .templet3 .protocol-linked {
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
    padding: 0 10px;
  }

  .templet3 .protocol-linked .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
  }

  .templet3 .protocol-linked .protocol-text {
    color: #008000;
  }

  /*----------------- 样式三 ------------------ */

  /*----------------- 样式四 (帮我办) ------------------ */
  .templet4 {
    font-size: 12px;
    background: #F2F2F2;
    height: 100%;
    overflow: auto;
  }

  .templet4 .column {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* 商品输入 */
  .templet4 .ware-input {
    padding: 0;
    display: flex;
  }

  .templet4 .ware-input .textarea {
    flex: 1;
    border: none;
    padding: 5px;
  }

  .templet4 .ware-input .util-icon {
    border-left: 1px solid #dddddd;
    background: #ffffff;
    padding: 5px 0;
  }

  .templet4 .ware-input .icon-item {
    width: 30px;
    height: 30px;
    margin: 10px 20px;
  }

  /* 地址 */
  .templet4 .address-group {
    background: #ffffff;
    display: flex;
    overflow: hidden;
    padding: 10px 5px;
    justify-content: space-between;
  }

  .templet4 .address-group:first-child {
    border-bottom: 1px solid #dddddd;
  }

  .templet4 .addres-icon {
    height: 100%;
  }

  .templet4 .addres-icon .icon {
    width: 30px;
    height: 30px;
    margin: 13px 10px;
  }

  .templet4 .address-input-group {
    width: 230px;
  }

  .templet4 .address-input-item {
    border: none;
  }

  .templet4 .addres-side {
    height: 100%;
  }

  .templet4 .addres-side .icon {
    width: 10px;
    height: 10px;
    margin: 23px 15px;
  }

  .templet4 .addres-side .addres-side-btn {
    margin: 12px 10px;
    font-size: 12px;
  }

  /* 单行默认 */
  .templet4 .col {
    background: #ffffff;
    display: flex;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet4 .column .col:last-child {
    border-bottom: none;
  }

  .templet4 .col-icon {
    width: 20px;
    height: 20px;
    margin: 5px;
  }

  .templet4 .col-text {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    flex: 1;
  }

  .templet4 .col-side {
    min-width: 30px;
    height: 30px;
    float: right;
  }

  .templet4 .col-side .icon {
    width: 10px;
    height: 10px;
    margin: 10px 5px 0;
    float: right;
  }

  .templet4 .col-side .switch-icon {
    width: 30px;
    height: 15px;
    margin: 7px 0 0;
  }

  .templet4 .scaler-icon {
    width: 80px;
    height: 25px;
    margin: 5px 0 0;
  }

  .templet4 .hint-text {
    line-height: 29px;
    height: 29px;
    display: inline-block;
  }

  .templet4 .col-input {
    height: 20px;
    line-height: 20px;
    border: none;
    outline: none;
  }

  .templet4 .protocol-linked {
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
    padding: 0 10px;
  }

  .templet4 .protocol-linked .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
  }

  .templet4 .protocol-linked .protocol-text {
    color: #008000;
  }

  .templet4 .col-weight {
    background: #ffffff;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet4 .col-weight p {
    color: #666;
    margin: 10px;
  }

  .col-weight-color {
    color: #008000;
  }

  /* 滑块 */
  .templet4 .col-slider {
    background: #ffffff;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet4 .col-slider .slider-text {
    position: relative;
    top: 10px;
  }

  .templet4 .col-slider .weight-color {
    color: #008000;
  }

  /*----------------- 样式四 ------------------ */

  /*----------------- 样式五 (帮我买) ------------------ */
  .templet5 {
    font-size: 12px;
    background: #F2F2F2;
    height: 100%;
    overflow: auto;
  }

  .templet5 .column {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* 商品输入 */
  .templet5 .ware-input {
    padding: 0;
    display: flex;
  }

  .templet5 .ware-input .textarea {
    flex: 1;
    border: none;
    padding: 5px;
  }

  .templet5 .ware-input .util-icon {
    border-left: 1px solid #dddddd;
    background: #ffffff;
    padding: 5px 0;
  }

  .templet5 .ware-input .icon-item {
    width: 30px;
    height: 30px;
    margin: 10px 20px;
  }

  /* 地址 */
  .templet5 .address-group {
    background: #ffffff;
    display: flex;
    overflow: hidden;
    padding: 10px 5px;
    justify-content: space-between;
  }

  .templet5 .address-group:first-child {
    border-bottom: 1px solid #dddddd;
  }

  .templet5 .addres-icon {
    height: 100%;
  }

  .templet5 .addres-icon .icon {
    width: 30px;
    height: 30px;
    margin: 13px 10px;
  }

  .templet5 .address-input-group {
    width: 230px;
  }

  .templet5 .address-input-item {
    border: none;
  }

  .templet5 .addres-side {
    height: 100%;
  }

  .templet5 .addres-side .icon {
    width: 10px;
    height: 10px;
    margin: 23px 15px;
  }

  .templet5 .addres-side .addres-side-btn {
    margin: 12px 10px;
    font-size: 12px;
  }

  /* 单行默认 */
  .templet5 .col {
    background: #ffffff;
    display: flex;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet5 .column .col:last-child {
    border-bottom: none;
  }

  .templet5 .col-icon {
    width: 20px;
    height: 20px;
    margin: 5px;
  }

  .templet5 .col-text {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    flex: 1;
  }

  .templet5 .col-side {
    min-width: 30px;
    height: 30px;
    float: right;
  }

  .templet5 .col-side .icon {
    width: 10px;
    height: 10px;
    margin: 10px 5px 0;
    float: right;
  }

  .templet5 .col-side .switch-icon {
    width: 30px;
    height: 15px;
    margin: 7px 0 0;
  }

  .templet5 .scaler-icon {
    width: 80px;
    height: 25px;
    margin: 5px 0 0;
  }

  .templet5 .hint-text {
    line-height: 29px;
    height: 29px;
    display: inline-block;
  }

  .templet5 .col-input {
    height: 20px;
    line-height: 20px;
    border: none;
    outline: none;
  }

  .templet5 .protocol-linked {
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
    padding: 0 10px;
  }

  .templet5 .protocol-linked .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
  }

  .templet5 .protocol-linked .protocol-text {
    color: #008000;
  }

  .templet5 .col-weight {
    background: #ffffff;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet5 .col-weight p {
    color: #666;
    margin: 10px;
  }

  .col-weight-color {
    color: #008000;
  }

  /* 滑块 */
  .templet5 .col-slider {
    background: #ffffff;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet5 .col-slider .slider-text {
    position: relative;
    top: 10px;
  }

  .templet5 .col-slider .weight-color {
    color: #008000;
  }

  /*----------------- 样式五 ------------------ */

  /*----------------- 样式六 (帮我买) ------------------ */
  .templet6 {
    font-size: 12px;
    background: #F2F2F2;
    height: 100%;
    overflow: auto;
  }

  .templet6 .column {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* 商品输入 */
  .templet6 .ware-input {
    padding: 0;
    display: flex;
  }

  .templet6 .ware-input .textarea {
    flex: 1;
    border: none;
    padding: 5px;
  }

  .templet6 .ware-input .util-icon {
    border-left: 1px solid #dddddd;
    background: #ffffff;
    padding: 5px 0;
  }

  .templet6 .ware-input .icon-item {
    width: 30px;
    height: 30px;
    margin: 10px 20px;
  }

  /* 地址 */
  .templet6 .address-group {
    background: #ffffff;
    display: flex;
    overflow: hidden;
    padding: 10px 5px;
    justify-content: space-between;
  }

  .templet6 .address-group:first-child {
    border-bottom: 1px solid #dddddd;
  }

  .templet6 .addres-icon {
    height: 100%;
  }

  .templet6 .addres-icon .icon {
    width: 30px;
    height: 30px;
    margin: 13px 10px;
  }

  .templet6 .address-input-group {
    width: 230px;
  }

  .templet6 .address-input-item {
    border: none;
  }

  .templet6 .addres-side {
    height: 100%;
  }

  .templet6 .addres-side .icon {
    width: 10px;
    height: 10px;
    margin: 23px 15px;
  }

  .templet6 .addres-side .addres-side-btn {
    margin: 12px 10px;
    font-size: 12px;
  }

  /* 单行默认 */
  .templet6 .col {
    background: #ffffff;
    display: flex;
    padding: 15px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }

  .templet6 .column .col:last-child {
    border-bottom: none;
  }

  .templet6 .col-icon {
    width: 20px;
    height: 20px;
    margin: 5px;
  }

  .templet6 .col-text {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    flex: 1;
  }

  .templet6 .col-side {
    min-width: 30px;
    height: 30px;
    float: right;
  }

  .templet6 .col-side .icon {
    width: 10px;
    height: 10px;
    margin: 10px 5px 0;
    float: right;
  }

  .templet6 .col-side .switch-icon {
    width: 30px;
    height: 15px;
    margin: 7px 0 0;
  }

  .templet6 .scaler-icon {
    width: 80px;
    height: 25px;
    margin: 5px 0 0;
  }

  .templet6 .hint-text {
    line-height: 29px;
    height: 29px;
    display: inline-block;
  }

  .templet6 .col-input {
    height: 20px;
    line-height: 20px;
    border: none;
    outline: none;
  }

  .templet6 .protocol-linked {
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
    padding: 0 10px;
  }

  .templet6 .protocol-linked .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
  }

  .templet6 .protocol-linked .protocol-text {
    color: #008000;
  }

  /*----------------- 样式六 ------------------ */
</style>
